<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章类别</title>
    <!-- css样式文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- js样式文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- 1.引入模板引擎js -->
    <script src="js/template-web.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            文章类别管理
        </div>
        <div class="container-fluid common_con">
            <table class="table table-striped table-bordered table-hover mp20 category_table">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>Slug</th>
                        <th class="text-center" width="100">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 模板引擎 渲染页面 -->
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3" class="text-center">

                            <!-- data-toggle="modal" 属性，一旦设置，那么 点击按钮时 就会 显示 或 隐藏 模态框 -->
                            <!-- data-target="#addModal"属性， 是 设置 要显示和 隐藏的 模态框 的 id选择器 -->
                            <!-- 5. 目标： 新增分类按钮 -->
                            <a id="btnShowAdd" href="#" class="btn btn-success" data-toggle="modal"
                                data-target="#addModal">新增分类</a>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <!-- bootstrap 中的 模态框 begin -->
    <div class="modal fade" id="addModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                    <h4 class="modal-title">新增分类</h4>
                </div>
                <div class="modal-body">
                    <!-- strData 获取表单数据 -->
                    <form id='f1'>
                        <!-- 隐藏域：用来在 编辑时  保存 分类 id 使用 -->
                        <input type="hidden" name="id" id="txtId" />

                        <div class="form-group">
                            <label for="recipient-name" class="control-label">分类名称:</label>
                            <input type="text" class="form-control" id="txtName" name="name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">分类别名:</label>
                            <input type="text" class="form-control" id="txtSlug" name="slug">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <!-- 关闭模态框按钮 -->
                    <button type="button" class="btn btn-default" id="model_shutoff">关闭</button>
                    <button type="button" class="btn btn-primary" id="model_add">确认</button>
                </div>
            </div>
        </div>
    </div>
    <!-- bootstrap 中的 模态框 end -->
     <!-- 2.写模板 -->
     <script id='createTr' type="text/html">
        {{each data v}}
        <tr>
            <td>{{v.name}}</td>
            <td>{{v.slug}}</td>
            <td class="text-center">
                <a href="javascript:void(0);" data-id="{{v.id}}" class="btn btn-info btn-xs">编辑</a>
                <a href="javascript:void(0);" data-id="{{v.id}}" class="btn btn-danger btn-xs">删除</a>
            </td>
        </tr>
        {{/each}}
    </script>
    <script>
        //1.目标： 页面一显示，就立即 加载 列表数据，并 通过 模板引擎 显示数据
        $(function (){
            loadListData()
        });
        function loadListData() {
            $.ajax({
                url:'http://localhost:8080/admin/category/list',
                method:'get',
                success: function(backData){
                    // console.log(backData);
                    if(backData.code == 200){
                        // 3. 调用模板api, 渲染页面
                        var strHtml = template('createTr', backData);
                        $('tbody').html(strHtml);
                    }
                },
            });
        }
        //2.目标： 点击 新增按钮，显示 模态框，点击 模态框的 新增确认按钮 ，就 将 模态框中的 数据 提交到 服务器 对应接口 保存
        $('#model_shutoff').click(function(){  
            $('#addModal').modal('hide'); // 通过 代码 关闭 模态框
        });
        $('#model_add').click(function(){
            //a1. 获取 表单数据
            var strData = $('#f1').serialize();
            //a2. 如果 按钮的 class 中有 add 类名，就执行 新增操作
            if($(this).hasClass('add')){
                // a3. ajax提交数据
                $.ajax({
                    url:'http://localhost:8080/admin/category/add',
                    method:'post',
                    data:strData,
                    success: function(backData){
                        if(backData.code == 201){
                            loadListData();// 重新请求 列表数据
                            $('#addModal').modal('hide');// 关闭 模态框

                            // 直接清空表单 所有元素的数据
                            document.getElementById('f1').reset();
                        }
                    },
                });
            }
            // a4. 如果 按钮的 class 中没有 add 类名，就执行 修改操作
            else {
                $.ajax({
                    url:'http://localhost:8080/admin/category/edit',
                    method:'post',
                    dataType:'json',
                    data:strData,
                    success: function(backData){
                        if(backData.code == 200){
                            //a.关闭 model窗口
                            $('#addModal').modal('hide');
                            // 重新请求 列表数据
                            loadListData();
                        }
                    },
                });
            }
        });
        //3. 点击 表格中的 删除按钮，就 提交数据到 服务器 对应接口 删除 对应文章分类数据
        $('body').on('click', '.btn-danger', function(){
            if(! confirm('你确定要删除此条数据吗？')) {
                return;
            }
            //b1.获取 当前按钮所在的 类别 的 id
            // var sId = this.getAttribute('data-id');
            var sId = $(this).attr('data-id');
            // var sId = this.dataset.id;

            //b2.保存 被点击的 删除按钮 jq对象
            var $btnDelete = $(this);

            // b3. ajax异步请求， 删除数据
            $.ajax({
                url:'http://localhost:8080/admin/category/delete',
                method:'post',
                data: { id: sId },
                success: function(backData){
                    console.log(backData);
                    if(backData.code == 204){
                        alert('删除成功');
                        $btnDelete.parents('tr').remove();// 将 按钮所在行 删除
                    }
                },
            });
        });
        //4.点击 表格中的 编辑按钮
         $('tbody').on('click', '.btn-info', function(){
            //4.1 获取 模态框 对象
            var $modal = $('#addModal');
            //c1. 先显示 模态框
            $modal.modal('show');
            //c2. 将 模态框的 提示 改成：修改分类
            $('.modal-title', $modal).text('修改分类');
            //c3. 将 模态框的 确认 按钮 删除 类名：.add
            $('#model_add').removeClass('add');

            //4.2  将 原有 数据 显示到 模态框的 表单元素中
            //d1. 将 当前 被点击 按钮 所在行的 第一个 和 第二个的内容拿出
            var firstCol = $(this).parents('tr').children('td:eq(0)');  //b2. var $btnDelete = $(this);
            var secondCol = $(this).parents('tr').children('td:eq(1)');
            //d2. 将 两个单元格 中的内容 设置给 模态框中的 文本框
            $('#txtName').val(firstCol.text());
            $('#txtSlug').val(secondCol.text());
            //d3.  将 被点击 编辑按钮 的 data-id　属性的值　设置给　模态框中的　隐藏域
            $("#txtId").val(this.dataset.id);
         });
        //5. 显示模态框(新增分类按钮) 添加 点击事件
        $('#btnShowAdd').click(function(){
            // e1. 将 模态框的 提示 改成：新增分类
             $('#addModal .modal-title').text('新增分类');
            // e2. 为 模态框中的 确认 按钮 添加 类名 add
            $('#model_add').addClass('add');
            // e3. 新增时 清空 模态框 中的 表单元素
            document.getElementById('f1').reset();
        });
         // 6.页面加载 时，隐藏 模态框
         $('#addModal').modal({
            show: false,
            backdrop: false
        });
    </script>
   
</body>

</html>